<template>
	<view class="container">
		<!-- 视频区域 -->
		<video :src="videoUrl" controls class="video"></video>
		<!-- 课程标题和描述 -->
		<view class="course-info">
			<text class="course-title">【每日国学大学生线上课程】{{ className }} </text>
			<text class="course-desc">【每日国学大学生线上课程，课程完全公益</text>
			<text
				class="course-intro">在当今快节奏的现代社会中，大学生面临着各种各样的挑战和诱惑。国学作为中华民族传统文化的瑰宝，蕴含着丰富的智慧和价值观。学习国学可以帮助大学生培养良好的品德修养，提升人文素养，增强民族自豪感和文化自信。通过参与我们的线上课程，你将有机会深入了解国学经典，感受传统文化的魅力。</text>
		</view>
		<!-- 分享图标 -->

		<!-- 页签切换 -->
		<view class="tab-bar">
			<view :class="{ 'tab-item': true, 'active': currentTab === 'introduction' }"
				@click="switchTab('introduction')">营期介绍</view>
			<view :class="{ 'tab-item': true, 'active': currentTab ==='schedule' }" @click="switchTab('schedule')">课程排期
			</view>
			<!-- <view :class="{ 'tab-item': true, 'active': currentTab ==='noset'}" @click="showShareOptions">
				<image src="/static/img/share.jpg" style="height: 25px; width: 25px;">
			</view> -->
		</view>
		<!-- 页签内容 -->
		<view class="tab-content" v-if="currentTab === 'introduction'">
			<text>国学是中华民族传统文化的精髓，它承载着先人的智慧和经验。在大学生阶段学习国学，有助于我们树立正确的世界观、人生观和价值观。国学经典中的教诲如“修身齐家治国平天下”，激励着我们不断提升自我，为社会做出贡献。同时，学习国学也能让我们在喧嚣的世界中找到内心的宁静，培养专注力和思考能力。</text>
		</view>
		<view class="tab-content" v-if="currentTab ==='schedule'">
			<view class="course-schedule">
				<text class="schedule-title">课程排期</text>
				<view v-for="(schedule, index) in scheduleList" :key="index" class="schedule-item"
					@click="openRegistrationPopup(schedule.sessionNumber, schedule.startWith, schedule.endWith)">
					<text>{{ schedule.sessionName }}</text>
					<text> {{ schedule.startWith  ==null? '' :schedule.startWith }}</text>
					<text> {{ schedule.endWith==null? '' :schedule.endWith }}</text>
				</view>
			</view>
		</view>
		<view class="tab-content" v-if="currentTab === 'today'">
			<!-- 应该用组件实现 -->
			<view class="course-item">
				<view class="course-title">正心班第 {{ day }} 天</view>
				<view class="course-date">{{ today }}已开课</view>
				<view class="course-list">
					<view v-for="(item, index) in courseList" :key="index" class="course-item-content">
						<view v-if="item.type === 'video'" class="course-video">
							<view class="icon-video item-title">{{ item.title }}</view>
							<view class="re">
								<text>课程</text>
								<!-- <text  @click="startLearning" class="small-button">开始学习</text> -->
							</view>
						</view>
						<view v-if="item.type === 'article'" class="course-article">
							<view class="icon-article item-title">{{ item.title }}</view>
							<view class="re">
								<text>课程</text>
								<!-- <text  @click="viewContent" class="small-button">查看</text> -->
							</view>
						</view>
						<view v-if="item.type === 'homework'" class="course-homework">
							<view class="icon-homework item-title">{{ item.title }}</view>
							<view class="item-lower re">
								<text>作业</text>
								<text @click="goToHomeworkPage" class="small-button">去完成作业</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 报名弹窗 -->
		<view class="popup" v-if="isRegistrationPopupVisible">
			<view class="popup-content">
				<text v-if="!startWith ||!endWith">请联系管理员设置开班日期</text>
				<text v-else>是否确认报名{{ selectedSessionNumber }}期课程？</text>
				<view class="popup-buttons">
					<text class="popup-button cancel" 
						@click="closeRegistrationPopup">取消</text>
					<text class="popup-button confirm" v-if="startWith && endWith" @click="confirmRegistration">确定</text>
				</view>
			</view>
		</view>
		<!-- 分享选项弹窗 -->
		<view class="share-popup" v-if="isSharePopupVisible">
			<view class="share-popup-content">
				<view class="share-option" @click="shareLink">链接</view>
				<view class="share-option" @click="shareQrCode">二维码</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 'introduction',
				scheduleList: [],
				courseId: '',
				className: '',
				day: 52,
				today: '03-20',
				isRegistrationPopupVisible: false,
				selectedSessionNumber: '',
				videoUrl: '',
				startWith: '', // 新增：开班开始时间
				endWith: '', // 新增：开班结束时间
				isSharePopupVisible: false, // 新增：分享选项弹窗是否显示
			};
		},
		onLoad(options) {
			this.courseId = options.classId;
			this.classId = options.classId;
			this.className = options.className;
			this.getSession();
			this.getVideo();
		},
		 onShareAppMessage() {
		    return {
		      title: '分享报名', // 分享标题
		      path: '/pages/course/index', // 分享路径，确保与页面路径一致
		      imageUrl: '/static/img/share.jpg', // 分享卡片的图片链接，可根据需求设置
		      success: function (res) {
		        console.log('分享成功', res);
		      },
		      fail: function (err) {
		        console.log('分享失败', err);
		      }
		    };
		  },
		methods: {
			getVideo() {
				uni.request({
					url: 'http://localhost:9090/user/getVideo',
					method: 'POST',
					data: {
						courseId: this.courseId,
						sessionNumber: '1'
					},
					success: (res) => {
						this.videoUrl = res.data.data.videoUrl;
					},
					fail: (err) => {
						console.error('请求失败', err);
					}
				});
			},
			switchTab(tab) {
				if (tab != 'noset') {
					this.currentTab = tab;
				}

			},
			getSession() {
				let userinfo = uni.getStorageSync('userInfo');
				uni.request({
					url: 'http://localhost:9090/course/getCourseSession',
					method: 'POST',
					data: {
						courseName: this.className
					},
					success: (res) => {
						this.scheduleList = res.data.data;
					},
					fail: (err) => {
						console.error('获取课程列表失败:', err);
					}
				});
			},
			startLearning() {
				console.log('开始学习');
			},
			viewContent() {
				// 这里可以添加查看内容的逻辑
				console.log('查看内容');
			},
			goToHomeworkPage() {
				console.log(this.courseId);
				uni.navigateTo({
					url: '/pages/work/index?courseId=' + this.courseId,
				});
			},
			openRegistrationPopup(sessionNumber, startWith, endWith) {
				this.selectedSessionNumber = sessionNumber;
				this.startWith = startWith;
				this.endWith = endWith;
				this.isRegistrationPopupVisible = true;
			},
			closeRegistrationPopup() {
				this.isRegistrationPopupVisible = false;
			},
			confirmRegistration() {
				const now = new Date();
				const start = new Date(this.startWith);
				const end = new Date(this.endWith);

				if (now < start || now > end) {
					return uni.showToast({
						title: '报名失败！当前不在可报名时间',
						icon: 'none'
					});
				}

				uni.request({
					url: 'http://localhost:9090/course/signUp',
					method: 'POST',
					data: {
						classId: this.classId,
						className: this.className,
						currentSessionNumber: this.selectedSessionNumber,
						studentId: uni.getStorageSync('userInfo').id
					},
					success: (res) => {
						uni.showToast({
							title: res.data.data,
							icon: 'none'
						});
					},
					fail: (err) => {
						console.error('请求失败', err);
					}
				});
				this.closeRegistrationPopup();
			},
			showShareOptions() {
				this.isSharePopupVisible = true;
			},
			closeSharePopup() {
				this.isSharePopupVisible = false;
			},
			shareLink() {
				const pagePath = '/pages/index/index';
				const query = '';
				wx.generateUrlLink({
					path: pagePath,
					query: query,
					success: (res) => {
						this.copyToClipboard(shareLink);
					},
					fail: (err) => {
						console.error('生成链接失败:', err);
					}
				});
				this.closeSharePopup();
			},
			shareQrCode() {
				// 这里添加分享二维码的逻辑
				console.log('分享二维码');
				this.closeSharePopup();
			}
		}
	};
</script>

<style scoped>
	.re {
		position: relative;
	}

	.container {
		padding: 20px;
	}

	.video {
		width: 100%;
		margin-bottom: 20px;
	}

	.course-info {
		margin-bottom: 20px;
	}

	.course-title {
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.course-date {
		font-size: 12px;
	}

	.course-desc {
		font-size: 14px;
		color: #999;
		margin-bottom: 10px;
	}

	.course-intro {
		font-size: 16px;
		color: #666;
	}

	.tab-bar {
		display: flex;
		justify-content: center;
		/* 让页签居中 */
		border-bottom: 1px solid #eee;
		margin-bottom: 20px;
	}

	.tab-item {
		padding: 10px 20px;
		font-size: 16px;
		color: #666;
		cursor: pointer;
	}

	.tab-item.active {
		color: #007aff;
		border-bottom: 2px solid #007aff;
	}

	.tab-content {
		font-size: 16px;
		color: #666;
	}

	.course-schedule {
		margin-bottom: 20px;
	}

	.schedule-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.schedule-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
		border-bottom: 1px solid #eee;
		padding-bottom: 5px;
		cursor: pointer;
	}

	.course-item {
		background-color: #fff;
		padding: 10px;
		margin-bottom: 10px;
	}

	.icon-video::before {
		content: '📹';
		margin-right: 5px;
	}

	.icon-article::before {
		content: '📄';
		margin-right: 5px;
	}

	.icon-homework::before {
		content: '📃';
		margin-right: 5px;
	}

	.course-item-content {
		width: 300px;
		height: 50px;
		font-size: 12px;
		border-top: 1px dashed #999;
	}

	.item-title {
		color: #333;
		font-weight: bold;
		margin: 5px 0 10px 0;
	}

	.small-button {
		position: absolute;
		right: 0;
		color: blue;
	}

	/* 报名弹窗样式 */
	.popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup-content {
		background-color: #fff;
		padding: 20px;
		border-radius: 5px;
	}

	.popup-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.popup-buttons {
		display: flex;
		justify-content: flex-end;
		margin-top: 20px;
	}

	.popup-button {
		padding: 5px 10px;
		margin-left: 10px;
		cursor: pointer;
	}

	.cancel {
		color: #666;
	}

	.confirm {
		color: #007aff;
	}

	/* 分享图标样式 */
	.share-icon {
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 100;
		cursor: pointer;
	}

	.icon-share {
		font-size: 20px;
		color: #666;
	}

	/* 分享选项弹窗样式 */
	.share-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.share-popup-content {
		background-color: #fff;
		padding: 20px;
		border-radius: 5px;
	}

	.share-option {
		font-size: 16px;
		margin-bottom: 10px;
		cursor: pointer;
	}
</style>